import React, { Component } from "react";

class Btn extends Component {
    constructor(props) {
        super(props)
        console.log(props)
        this.state = {
            ...props.data,
            selectBtn:false
        }
    }
    render() {
        let {selectBtn}=this.state;
        return <div className="btn">
            <div className="btnColor">
                <p>选择颜色:</p> {selectBtn?<p onClick={this.colorClick.bind(this)} className="active">{this.state.color}</p>:<p onClick={this.colorClick.bind(this)}>{this.state.color}</p>}
            </div>
            <div className="btnSize">
                <p>选择尺码:</p>
                {
                    this.state.size.map((item, index) => {
                        return <h4 key={index} onClick={()=>{
                            this.sizeClick(index)
                        }}>{item}</h4>
                    })
                }
            </div>
        </div>
    }
    colorClick(){
        // this.state.selectBtn=!this.state.selectBtn;
        this.setState({selectBtn:!this.state.selectBtn})
    }
    sizeClick(index){
        // console.log(index)
    }
}
export default Btn;